<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="test"></div>
    <script src="../React-js/react.development.js" type="text/javascript"></script>
    <script src="../React-js/react-dom.development.js" type="text/javascript"></script>
    
    <script src="../React-js/babel.min.js" type="text/javascript"></script>
    <script type="text/babel">
         class Weather extends React.Component{
            state={
                isHot:false
            }

            render(){
                const { isHot } = this.state
                return <h1 onClick={this.changeWeather}> 今天天气很{isHot?'炎热':'凉爽'} </h1>
            }
            
            changeWeather = ()=>{
                const { isHot } = this.state
                this.setState({isHot:!isHot})
            }
        }
        ReactDOM.render(<Weather />,document.querySelector('#test'))
    </script>
</body>
</html>